<template>
  <view>姓名：{{ username }}</view>
  <view>年龄：{{ age }}</view>
  <!-- <view>城市：{{ address.city }}</view> -->
  <!-- <view>区：{{ person.address.district }}</view> -->
  <!--<view>街道：{{ person.address.road }}</view> -->
  <button type="primary" size="mini" @click="changeName">修改姓名</button>
</template>

<script setup lang="ts">
import { ref, reactive, toRef, toRefs } from "vue";

let person = reactive({
  username: "张三",
  age: 21,
  address: {
    city: "北京",
    district: "海淀",
    road: "上庄路",
  },
});

let { username, age } = toRefs(person);
console.log(username, age);

// console.log(state,"111")
// console.log(person.username)
// const username = toRef(person, "username");
// const age =toRef(person,"age")
//   // let username = person.username;
//   console.log(username);
const changeName = function () {
  age.value += 1;
};
// let { username, address } = person;
// console.log(person)
// console.log(username,address)
</script>

<style style="less" scoped></style>
